<template>
  <div class="view">
    <!-- <div class="search-header">
      <el-form :inline="true">
        <el-form-item label="状态">
          <el-select
            v-model="queryParams.useType"
            placeholder="请选择使用状态"
            clearable
          >
            <el-option
              v-for="dict in coupon_use_type"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
    </div> -->
    <el-table :data="list">
      <el-table-column type="selection" width="55" />
      <el-table-column label="编号" prop="id" align="center" width="80"></el-table-column>
      <el-table-column label="图片"  align="center">
        <template #default="scope">
          <image-preview
            :src="scope.row.coverImg"
            :width="50"
            :height="50"
          ></image-preview>
        </template>
      </el-table-column>
      <el-table-column label="商品名" prop="spuName" width="300">
        <template #default="scope">
          <el-button
            link
            type="success"
            @click="
              () => {
                router.push({
                  path: '/product',
                  query: { spuId: scope.row.spuId },
                });
              }
            "
          >
            {{ scope.row.spuName }}
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button
            link
            type="danger"
            icon="Delete"
            size="small"
            @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>
<script setup>
import { listUserCouponHistory } from "@/api/mall/client/points/coupon";
import { listCollectSpu, delCollectSpu } from "@/api/mall/client/user/collect";
import { useRouter } from "vue-router";
const { proxy } = getCurrentInstance();
const router = useRouter();
const list = ref([]);
const total = ref(0);
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
});
const getList = async () => {
  const res = await listCollectSpu(queryParams.value);
  list.value = res.rows;
  total.value = res.total;
};
getList();

// 删除
const handleDelete = async (row) => {
  proxy.$modal.confirm("确定删除该收藏？").then(() => {
    delCollectSpu(row.spuId).then(() => {
      getList();
      proxy.$message.success("删除成功");
    });
  });
};
</script>

<style lang="scss" scoped>
:deep(.el-pagination) {
  --el-pagination-hover-color: #1aa684;
  --el-color-primary: #1aa684;
}
:deep(.el-select-dropdown__item.selected) {
  color: #1aa684 !important;
}
.el-select {
  --el-select-input-hover-border-color: #1aa684;
  --el-select-input-focus-border-color: #1aa684;
  --el-color-primary: #1aa684;
}
.el-select-dropdown {
  --el-color-primary: #1aa684;
}
:deep(.selected) {
  color: #1aa684 !important;
}
</style>
